<template>
  <div class="dashboard">
      <TopView/>
        <MiddleView/>
         <BottomView/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TopView from '@/views/dashboard/components/TopView'
import BottomView from '@/views/dashboard/components/BottomView'
import MiddleView from '@/views/dashboard/components/MiddleView'

export default {
  name: 'Dashboard',
  components:{TopView,BottomView,MiddleView},
  computed: {
    ...mapGetters([
      'name'
    ])
  },
 mounted() {
    this.$store.dispatch('data/getReportData')
  }
}
</script>

<style lang="scss" scope>
.dashboard {
    width: 100%;
    padding: 20px;
    background-color: #eee;
    margin: 0px;
}
</style>
